<template>
  <div class="content" v-loading="loading">
    <div class="inputLine flexBet">
      <div class="flex">
        <el-input
          style="width: 320px"
          v-model="queryParams.courseName"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter.native="getList"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-select
          style="width: 200px; margin-left: 16px"
          v-model="queryParams.semesterId"
          placeholder="请选择"
        >
          <el-option label="全部" value=""></el-option>

          <el-option
            v-for="(item, index) in semesterList"
            :key="index"
            :label="item.semesterName"
            :value="item.semesterId"
          ></el-option>
        </el-select>
      </div>

      <div class="flex">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
        >重置
        </el-button>
      </div>
    </div>
    <div class="box" v-if="list.length > 0">
      <div
        class="course rela shou"
        @click="to(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <img
          v-if="item.courseStatus == 0"
          class="status absolute"
          src="@/assets/images/disciplineGroup/open.png"
        />
        <img
          v-else
          class="status absolute"
          src="@/assets/images/disciplineGroup/close.png"
        />
        <img class="cover" :src="item.coursePic" alt=""/>
        <tooltip class="name" :text="item.courseName" width="216"></tooltip>
        <tooltip
          class="wname"
          :text="item.workstationName"
          width="216"
        ></tooltip>
      </div>
    </div>
    <el-empty v-else description="暂无课程"></el-empty>
    <!-- <div class="pageLine flexEnd flexColCenter">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :page-size="10"
        :current-page="1"
      />
    </div> -->
  </div>
</template>

<script>
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'
import { branchDisciplineCourseList } from '@/api/disciplineGroup/disciplineGroup'

export default {
  props: {
    activeIndex: [Number, String]
  },
  data() {
    return {
      queryParams: {
        courseName: '',
        semesterId: ''
      },
      loading: false,
      semesterList: [],
      list: []
    }
  },
  watch: {
    activeIndex: {
      async handler(val) {
        if (val == 1) {
          await this.getSemesterList()
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    to(item) {
      this.$router.push({
        path: '/course/addCourse',
        query: {
          type: 'detail',
          status: '01',
          courseId: item.courseId,
          modelType: item.courseType
        }
      })
    },
    findNearestSemesterId(semesterArray) {
      const now = new Date()
      let matchedSemesterId = null
      let nearestSemesterId = null
      let minDiff = Infinity

      semesterArray.forEach((semester) => {
        const beginTime = new Date(semester.beginTime)
        const endTime = new Date(semester.endTime)

        // 判断当前时间是否在区间内
        if (now >= beginTime && now < endTime) {
          matchedSemesterId = semester.semesterId // 找到匹配的学期ID
          return // 直接跳出循环
        }

        // 如果不在区间内，计算与当前时间的差值，寻找最近的一个开始时间
        const diff = Math.abs(now - beginTime)
        if (diff < minDiff) {
          minDiff = diff
          nearestSemesterId = semester.semesterId
        }
      })

      // 如果找到了匹配的学期，优先返回匹配的学期ID
      return matchedSemesterId || nearestSemesterId || ' '
    },
    async getSemesterList() {
      this.loading = true
      try {
        let res = await getSchoolSemesterList()
        this.semesterList = res.rows
        let semesterId = this.findNearestSemesterId(res.rows)
        // 将 this.queryParams.semesterId 对应的学期置顶，其余按时间倒序排列
        this.semesterList = this.semesterList.sort((a, b) => {
          // 如果 a 是目标学期，将其置顶
          if (a.semesterId + '' == semesterId + '') {
            return -1
          }
          // 如果 b 是目标学期，将其置顶
          if (b.semesterId + '' == semesterId + '') {
            return 1
          }
          // 否则按 beginTime 时间倒序排列
          return new Date(b.beginTime) - new Date(a.beginTime)
        })
      } finally {
        this.loading = false
      }
    },
    async getList() {
      this.loading = true
      try {
        const res = await branchDisciplineCourseList({
          disciplineGroupId: this.$route.query.disciplineGroupId,
          courseName: this.queryParams.courseName,
          semesterId: this.queryParams.semesterId
        })
        if (res.code == 200) {
          this.list = res.data
        }
      } finally {
        this.loading = false
      }
    },
    resetSearch() {
      this.queryParams = {
        courseName: '',
        semesterId: ''
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 310px + 80px);
  display: flex;
  box-sizing: border-box;
  flex-direction: column;

  .inputLine {
    padding: 24px 34px 0 42px;
  }

  .box {
    align-content: flex-start !important; /* 避免行间多余空白 */
    margin: 24px 0 0 0;
    padding: 0 0 0 42px;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .pageLine {
    padding: 0 64px 0 0;
    height: 60px;
  }

  .course {
    margin: 0 24px 41px 0;
    width: 240px;
    height: 217px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    padding: 12px 12px 0 12px;

    .status {
      width: 56px;
      height: 29px;
      top: 16px;
      left: -10px;
    }

    .cover {
      width: 216px;
      height: 135px;
      background: #ededed;
      border-radius: 8px;
    }

    .name {
      margin-top: 4px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }

    .wname {
      margin-top: 4px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
